
<template>
<el-container>
  <el-aside width="200px">
    <div class="logo" >
      这是个啥
    </div>
      <el-menu
      :router='true'
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
    
      <el-menu-item index="/home/list">
        <i class="el-icon-s-grid"></i>
        <span slot="title">文章列表</span>
      </el-menu-item>
       <el-menu-item index="/home/publish">
        <i class="el-icon-s-promotion"></i>
        <span slot="title">发布文章</span>
      </el-menu-item>
    
    </el-menu>
    </el-aside>
  <el-container>
    <el-header>
      <img src="../style/7.png" alt="">
      <span>无情哈拉少</span>
      <el-button @click="loginout"  type="primary">退出</el-button>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
  methods:{
   async loginout(){
      try {
        console.log('退出');
       await this.$confirm('是否退出', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
        })
          // 1.删除token和个人id
          localStorage.removeItem('token')
          localStorage.removeItem('user')
            // 2.提示
          this.$message.success('退出成功')
            // 3.跳转
          this.$router.push('/login')
      }catch{
          console.log('取消了');
      }
}
}
}
</script>
<style lang='less' scoped >
  .el-container{
    height: 100%;
  
    .el-header{
        display: flex;
        justify-content: flex-end;
        align-items: center;
      img{
        width: 50px;
        height: 50px;
        border-radius: 25px;
        object-fit: cover;
        margin-right: 10px;
      }
      span{
        font-size: 14px;
        margin-right: 10px;
      }
    }
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    .logo{
      background-color: rgb(243, 135, 135);
      height: 60px;
      text-align: center;
      line-height: 60px;
      font-size: 30px;
    }
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  
</style>